<template>
    <div class="test">
        正在使用封装好的列表组件
        <ListInfo v-for="item in count" :key="item" :title="'这是标题'+item" :time="'这是时间'" :author="'作者'">
            <template v-slot:left>
                <div class="listLeft">
                    <input type="checkbox" />
                </div>
            </template>
            <template v-slot:right>
                <div class="listRight">
                    more...
                </div>
            </template>
            <template v-slot:kind>
                <div class="list-kind">分类：项目 / 后台管理</div>
            </template>
            <template v-slot:tags>
                <div class="list-tags">
                    <span>热门</span>
                    <span>推荐</span>
                </div>
            </template>
        </ListInfo>
        <p v-if="isBottom">正在加载...</p>
        <p v-if="isEnd">没有数据了，加载完成</p>
    </div>
</template>

<script>
import ListInfo from '@/components/ListInfo.vue'
export default {
    components:{
        ListInfo
    },
    data(){
        return {
            count: 15,
            isBottom: false,
            isEnd: false
        }
    },
    mounted() {
        // 1. 组件挂载成功后，给页面绑定滚动事件
        document.onscroll = this.scroll;
    },
    methods: {
        scroll(){
            // 2. 获取滚走了的距离
            const st = document.documentElement.scrollTop;
            // 2. 获取页面的可视高度
            const ch = document.documentElement.clientHeight;
            // 2. 获取页面的总高度（含可滚动的尺寸）
            const sh = document.documentElement.scrollHeight;
            // console.log(sh, st, ch);
            // 3. 当页面的总高度小于了滚走的距离加上可视高度加过渡距离
            if(sh < st + ch + 100){
                // 4. 到底了，修改状态
                this.isBottom = true;
                // 5. 加载数据
                this.load();
                // 6. 放置到底之后，重复触发
                document.onscroll = null;
            }
        },
        load(){
            // 7. 异步加载数据
            setTimeout(()=>{
                // 8. 加载成功，修改状态
                this.isBottom = false;
                // 处理数据
                this.count += 10;
                // 9. 判断数据是否已经全部加载
                if(this.count > 50){
                    // 10. 修改加载结束状态
                    this.isEnd = true;
                    // 11. 清除事件
                    document.onscroll = null;
                }
            },1000)
        }
    },
    watch:{
        isBottom(val){
            // 12. 加载完成后，新数据渲染到页面后，再次滚动到底部的加载
            if(!val && !this.isEnd){
                document.onscroll = this.scroll;
            }
        }
    }
}

</script>

<style lang="less">
</style>